<template>
	<view class="page">
        <nav-bar title="代理商入驻"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view v-if="state == 1201" class="review_box">
			<image src="../../../static/icon/entering/icon_review.png" mode="aspectFit"></image>
			<text>谢谢您的支持，请等待审核！</text>
			<button @click="onJumpMall">去商城逛逛</button>
		</view>
		<view v-else-if="state == 1301" class="review_box">
			<image src="../../../static/icon/entering/icon_review.png" mode="aspectFit"></image>
			<text>审核失败，请重新填写</text>
			<button @click="state = ''">去填写</button>
		</view>
		<view v-else>
			<view class="input_form_box">
				<view class="input_box">
					<view class="name">推荐码</view>
					<view class="input_info" v-if="userInfo.recommendPhone">{{userInfo.recommendPhone || ""}}</view>
					<view class="input_info" v-else><input type="number" v-model="recommend" maxlength="11" placeholder="请输入推荐人手机号" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">姓名</view>
					<view class="input_info"><input type="text" v-model="name" placeholder="请填写真实姓名，用于结算" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">手机号</view>
					<view class="input_info"><input type="number" v-model="phone" maxlength="11" placeholder="请填写手机号码方便联系" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">身份证号码</view>
					<view class="input_info"><input type="text" v-model="cardNo" maxlength="18" placeholder="请填写身份证号码" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">申请区域</view>
					<view class="select_info" @click="areaSelect">
						<text class="value" v-if="addressList.length == 3">{{ addressList[0].name }}/{{ addressList[1].name }}/{{ addressList[2].name }}</text>
						<text class="value" v-else-if="addressList.length == 2">{{ addressList[0].name }}/{{ addressList[1].name }}</text>
						<text class="value" v-else-if="addressList.length == 1">{{ addressList[0].name }}</text>
						<text class="select" v-else="">请选择所在城市</text>
					</view>
				</view>
			</view>
			<view class="input_form_box marginTop">
				<view class="input_title">上传本人身份证照</view>
				<view class="input_box">
					<view class="id_card_box">
						<view @click="onUnloadImg(1000)">
							<image v-if="cardFront" :src="cardFront" mode="aspectFill"></image>
							<image v-else="" src="../../../static/icon/theme/ic_upload_portrait.png" mode="aspectFit"></image>
						</view>
						<view @click="onUnloadImg(2000)">
							<image v-if="cardReverse" :src="cardReverse" mode="aspectFill"></image>
							<image v-else="" src="../../../static/icon/theme/ic_upload_nationalemblem.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="protocol">
					<view class="active"></view>
					我已经阅读并了解了
					<text @click="onPageJump('/pages/user/protocol?type=1503')">《代理商协议》</text>
				</view>
				<view class="form_but"><button class="active" @click="onSubmit">申请成为代理商</button></view>
			</view>
			<address-popup v-model="popupShow" :length="1" :force="false" @change="addressChange"></address-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import addressPopup from '@/components/common/address_popup';
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				// 名称
				name: '',
				// 手机号码
				phone: '',
				// 身份证号码
				cardNo: '',
				// 身份证正面照
				cardFront: '',
				// 身份证反面照
				cardReverse: '',
				// 推荐码
				recommend: '',
				state: '',
				addressList: [],
				popupShow: false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			if (e.state) {
				this.state = e.state;
			}
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			areaSelect() {
				this.popupShow = true;
			},
			addressChange(e) {
				this.addressList = e;
			},
			//上传图片
			// type = 1000 负责人身份证正面照
			// type = 2000 负责人身份证反面照
			onUnloadImg(type) {
				this.$http.qnImgUpload({
					count: 1
				}).then(res => {
					if (type == 1000) {
						this.cardFront = res[0];
					} else if (type == 2000) {
						this.cardReverse = res[0];
					}
				});
			},
			onJumpMall() {
				uni.switchTab({
					url: this.$base.homePath
				});
			},
			onSubmit() {
				if (this.recommend) {
					if (!/\d{11}/.test(this.recommend)) {
						uni.showToast({
							title: '推荐码为11位的手机号',
							icon: 'none'
						});
						return;
					}
				}
				if (this.name == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					});
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.$base.phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.cardNo == "") {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					});
					return;
				}
				if (!/[0-9a-zA-Z]{18}/.test(this.cardNo)) {
					uni.showToast({
						title: '身份证号码不正确',
						icon: 'none'
					});
					return;
				}
				if (this.addressList.length < 1) {
					uni.showToast({
						title: '请选择申请区域',
						icon: 'none'
					});
					return;
				}
				if (this.cardFront == "") {
					uni.showToast({
						title: '请上传身份证正面照',
						icon: 'none'
					});
					return;
				}
				if (this.cardReverse == "") {
					uni.showToast({
						title: '请上传身份证反面照',
						icon: 'none'
					});
					return;
				}
				let httpData = {
					name: this.name,
					phone: this.phone,
					cardNo: this.cardNo,
					cardFront: this.cardFront,
					cardReverse: this.cardReverse,
				};
				let len = this.addressList.length;
				if (len == 3) {
					httpData.provinceId = this.addressList[0].objId;
					httpData.provinceName = this.addressList[0].name;
					httpData.cityId = this.addressList[1].objId;
					httpData.cityName = this.addressList[1].name;
					httpData.areaId = this.addressList[2].objId;
					httpData.areaName = this.addressList[2].name;
				} else if (len == 2) {
					httpData.provinceId = this.addressList[0].objId;
					httpData.provinceName = this.addressList[0].name;
					httpData.cityId = this.addressList[1].objId;
					httpData.cityName = this.addressList[1].name;
				} else if (len == 1) {
					httpData.provinceId = this.addressList[0].objId;
					httpData.provinceName = this.addressList[0].name;
				}
				if (this.recommend) {
					httpData.recommend = this.recommend;
				}
				this.$http.post('api/proxy/v1/settled', httpData).then(res => {
					uni.showModal({
						title: '入驻提示',
						content: '信息提交成功！等待工作人员审核~',
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.title {
		padding: 30upx;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;

		text {
			@include theme('font');
		}
	}

	.input_form_box {
		margin-left: 30upx;
		margin-right: 30upx;
		background-color: #fff;
		border-radius: 8upx;
		padding-top: 15upx;
		padding-right: 30upx;
		padding-left: 30upx;
		margin-bottom: 20upx;

		.input_box {
			padding: 0;
		}

		.input_title {
			padding: 30upx 0;
		}

		.input_box .name,
		.input_box .input_info {
			padding: 40upx 0upx;
		}
	}

	.level_select {
		display: flex;
		width: 100%;
		flex-shrink: 0;
		padding-bottom: 30upx;

		>view {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 90upx;
				height: 50upx;
			}

			text {
				font-size: 28upx;
				color: #333333;
				margin-top: 12upx;
			}

			&:after {
				margin-top: 30upx;
				content: '';
				width: 38upx;
				height: 38upx;
				margin-right: 15upx;
				border: 2upx solid #eee;
				border-radius: 50%;
				box-sizing: border-box;
			}

			&.active::after {
				border: 12upx solid $themeColor;
			}
		}
	}

	.id_card_box {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30upx;

		>view {
			width: 300upx;
			height: 195upx;

			&:nth-child(2) {
				margin-left: 40upx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.protocol {
		justify-content: flex-start;
		margin-top: 80upx;
	}

	.bottom_line {
		border-bottom: 1upx solid #f1f1f1;
	}

	.form_but {
		padding: 40upx 0upx 40upx 0upx;
		margin-top: 0;

		button {
			border-radius: 8upx;
			width: 100%;
		}
	}

	.review_box {
		padding: 60upx;
		height: 70vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 247upx;
			height: 248upx;
		}

		text {
			margin-top: 80upx;
		}

		button {
			margin-top: 120upx;
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			@include theme('bg');
			border-radius: 8upx;
			font-size: 32upx;
			color: #ffffff;
		}
	}
</style>
